<template>
  <view class="complaint-orders-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="投诉订单" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 标签页导航 -->
      <view class="tab-nav">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'all' }"
          @click="switchTab('all')"
        >
          全部
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'processing' }"
          @click="switchTab('processing')"
        >
          进行中
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'completed' }"
          @click="switchTab('completed')"
        >
          已完成
        </view>
      </view>
      
      <!-- 订单列表 -->
      <view class="orders-list">
        <view 
          class="order-card" 
          v-for="(item, index) in filteredOrders" 
          :key="index"
        >
          <view class="card-header">
            <text class="card-title">投诉</text>
            <text class="archive-btn" @click="handleArchive(item)">{{item.zt}}</text>
          </view>
          
          <view class="card-content">
            <view class="info-row">
              <text class="info-label">订单编码</text>
              <text class="info-value">{{ item.complaintOrderId }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">受理时间</text>
              <text class="info-value">{{ item.complaintDate }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">受理渠道</text>
              <text class="info-value">{{ item.channelNbr }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">产品类型</text>
              <text class="info-value">{{ item.complaintMessage }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">业务号码</text>
              <text class="info-value">{{ item.accNbr }}</text>
            </view>
          </view>
          
          <view class="card-footer">
            <button class="progress-btn" @click="handleQueryProgress(item)">进度查询</button>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="filteredOrders.length === 0" class="empty-state">
          <text class="empty-text">暂无投诉订单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const navBarHeight = ref(80)
const activeTab = ref('all') // 'all' | 'processing' | 'completed'

// 模拟订单数据
const ordersList = ref([
  {
    orderCode: 'TS0991251111587863',
    acceptTime: '2025-11-11 10:13:40',
    acceptChannel: '网上营业厅',
    productType: '其他通用类',
    businessNumber: '199****9544',
    status: 'completed' // 'processing' | 'completed'
  },
  {
    orderCode: 'TS0991251111587864',
    acceptTime: '2025-11-11 09:30:20',
    acceptChannel: '手机APP',
    productType: '手机服务类',
    businessNumber: '199****9544',
    status: 'processing'
  },
  {
    orderCode: 'TS0991251111587865',
    acceptTime: '2025-11-10 15:45:10',
    acceptChannel: '客服热线',
    productType: '宽带服务类',
    businessNumber: '199****9544',
    status: 'completed'
  }
])

// 根据标签页过滤订单
const filteredOrders = computed(() => {
  if (activeTab.value === 'all') {
    return ordersList.value
  } else if (activeTab.value === 'processing') {
    return ordersList.value.filter(item => item.status === 'processing')
  } else if (activeTab.value === 'completed') {
    return ordersList.value.filter(item => item.status === 'completed')
  }
  return []
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
  
  // TODO: 加载订单列表数据
  loadOrders()
})

onLoad((options) => {
  // 如果从查询页面跳转过来，可以根据参数加载数据
  if (options && options.queryParams) {
    // 解析查询参数并加载对应的订单
    const queryParams = JSON.parse(decodeURIComponent(options.queryParams))
    console.log('接收到的查询参数:', queryParams)
    qryWorkOrderList(queryParams)
  }
})

const qryWorkOrderList = (queryParams) =>{
  api.qryWorkOrderList({
    ...queryParams,
  }).then(res => {
    
    
    const data = JSON.parse(res.data)
    ordersList.value = data
    console.log('查询套餐余量:', JSON.stringify(JSON.parse(res.data)))

    // ordersList.value = [] 
    // console.log('查询投诉订单:', )
  //   {
  //   orderCode: 'TS0991251111587865',
  //   acceptTime: '2025-11-10 15:45:10',
  //   acceptChannel: '客服热线',
  //   productType: '宽带服务类',
  //   businessNumber: '199****9544',
  //   status: 'completed'
  // }
    ordersList.value.forEach(item => {
      var i =item.complaintStatusInfos.length;
      var zt="";
      if(i==1){
        zt = "受理";
        item.zt = zt;
        item.status = 'processing';
      //   var params = {
      //   orderCode: item.complaintOrderId,
      //   acceptTime: item.complaintDate,
      //   acceptChannel: item.channelNbr,
      //   productType: item.complaintMessage,
      //   businessNumber: item.accNbr,
      //   status: 'processing',
      //   zt: zt,
      // }
      // ordersList.value.push(params)
      }else if(i==2){
        zt = "处理中";
        item.zt = zt;
        item.status = 'processing';
      //   var params = {
      //   orderCode: item.complaintOrderId,
      //   acceptTime: item.complaintDate,
      //   acceptChannel: item.channelNbr,
      //   productType: item.complaintMessage,
      //   businessNumber: item.accNbr,
      //   status: 'processing',
      //   zt: zt,
      // }
      // ordersList.value.push(params)
      }else if (i==3){
        zt = "回访";
        item.zt = zt;
        item.status = 'processing';
      //   var params = {
      //   orderCode: item.complaintOrderId,
      //   acceptTime: item.complaintDate,
      //   acceptChannel: item.channelNbr,
      //   productType: item.complaintMessage,
      //   businessNumber: item.accNbr,
      //   status: 'processing',
      //   zt: zt,
      // }
      // ordersList.value.push(params)
      }else {
        zt = "归档";
        item.zt = zt;
        item.status = 'completed';
      //   var params = {
      //   orderCode: item.complaintOrderId,
      //   acceptTime: item.complaintDate,
      //   acceptChannel: item.channelNbr,
      //   productType: item.complaintMessage,
      //   businessNumber: item.accNbr,
      //   status: 'completed',
      //   zt: zt,
      //   custEval: item.custEval,

      // }
      // ordersList.value.push(params)
      }
      
    })


    console.log('查询套餐余量1111111 :', JSON.stringify(ordersList.value))

  
  }).catch(err => {
    console.error('查询套餐余量失败:', err)
  })
      
     
}

// 加载订单列表
const loadOrders = async () => {
  // TODO: 调用接口获取订单列表
  // const res = await api.getComplaintOrders({ status: activeTab.value })
  // ordersList.value = res.data || []
}

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
  // 重新加载数据
  loadOrders()
}

// 归档订单
const handleArchive = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要归档该投诉订单吗？',
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用归档接口
        console.log('归档订单:', item.orderCode)
        uni.showToast({
          title: '归档成功',
          icon: 'success'
        })
        // 更新订单状态
        item.status = 'completed'
      }
    }
  })
}

// 查询进度
const handleQueryProgress = (item) => {
  console.log('查询进度:', item)

  // 跳转到进度查询详情页面
  uni.navigateTo({
    url: `/pages/complaint-detail/complaint-detail?items=${encodeURIComponent(JSON.stringify(item))}`,
    success: () => {
      console.log('跳转到进度查询页面成功')
    },
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.complaint-orders-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(40rpx);
  background: rgba(255, 255, 255, 0.8);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 32rpx;
  padding-bottom: 40rpx;
}

/* 标签页导航 */
.tab-nav {
  display: flex;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 32rpx;
  gap: 8rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  font-weight: 400;
  border-radius: 12rpx;
  transition: all 0.3s;
  position: relative;
}

.tab-item.active {
  color: rgba(78, 138, 254, 1);
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 2rpx;
}

/* 订单列表 */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.order-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid rgba(240, 240, 240, 1);
}

.card-title {
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.archive-btn {
  font-size: 28rpx;
  color: rgba(78, 138, 254, 1);
  padding: 8rpx 16rpx;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
}

.info-value {
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  font-weight: 400;
  flex: 1;
  text-align: right;
  margin-left: 32rpx;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 24rpx;
  border-top: 1rpx solid rgba(240, 240, 240, 1);
}

.progress-btn {
  padding: 12rpx 32rpx;
  border: 2rpx solid rgba(78, 138, 254, 1);
  border-radius: 80rpx;
  background: transparent;
  color: rgba(78, 138, 254, 1);
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
</style>

